<template>
  <div class="top-box">
    <div class="container box1">
        <div class="child"></div>
    </div>
    <div class="container box2">
        <div class="child"></div>
    </div>
    <div class="container box3">
        <div class="child"></div>
    </div>
  </div>
</template>

<style scoped>
.top-box{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.container{
  width: 300px;
  height: 300px;
}
.box1{
  border: 1px solid #f0f;
}

.box2{
  border: 1px solid #f00;
}

.box3{
  border: 1px solid #0ff;
}
.child{
  width: 160px;
  height: 160px;
  border: 1px solid #000;
}
</style>